<template>
  <!-- 水位折线图 -->
  <div class="waterLevelBox" ref="waterLevelEchart"></div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

export default {
  mounted() {
    var waterLevelChartDom = this.$refs.waterLevelEchart;
    var myChart = echarts.init(waterLevelChartDom);
    var option;

    option = {
      title: {
        text: "水位情况统计",
        textStyle: {
          fontSize: 14,
          color: "#000",
          fontWeight: "bold",
        },
      },
      grid: {
        top: "50px",
        left: "35px",
        right: "30px",
        bottom: "30px",
        backgroundColor: "#fff",
        width: "auto", //图例宽度
        height: "auto", //图例高度
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        itemStyle: {
          borderCap: "round",
        },
        right: "10",
        top: "12",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        axisTick: {
          interval: 1,
          show: false, //是否显示坐标轴刻度。
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          formatter: "{value} ",
        },
      },
      series: [
        {
          name: "水位",
          type: "line",
          data: [0, 11, 30, 11, 12, 12, 9],
          color: "#266FE8",
          clip: true,
          labelLine: {
            show: true,
          },
        },
      ],
    };
    option && myChart.setOption(option);
  },
};
</script>

<style scoped>
.waterLevelBox {
  height: 300px;
  width: 343px;
  margin: 0 auto;
  border-radius: 8px 8px 0 0;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  margin-top: 16px;
}
</style>
